<template>
  <div class="page-container">
    <div class="in-container content" v-loading="loading">
      <div class="enterpriseInfo">
        <div class="topBox">
          <div class="codebox">企业编号：{{ formData.id }}</div>
          <div v-if="this.formData.auditState == 0" class="status statusType1">
            草拟
          </div>
          <div
            v-else-if="this.formData.auditState == 1"
            class="status statusType1"
          >
            待审核
          </div>
          <div
            v-else-if="this.formData.auditState == 2"
            class="status statusType1"
          >
            已审核
          </div>
          <div v-else class="status statusType1">已驳回</div>
        </div>
        <selectDown></selectDown>
        <div class="messBox">
          <div class="messItem">
            <div class="messLabel">企业简称：</div>
            <div class="messValue">{{ BaseFormData.shortName }}</div>
          </div>
          <div class="messItem">
            <div class="messLabel">企业类型：</div>
            <div class="messValue">{{ BaseFormData.enterpriseType }}</div>
          </div>
          <div class="messItem">
            <div class="messLabel">经营类目：</div>
            <div class="messValue">{{ BaseFormData.businessCategoryStr }}</div>
          </div>
        </div>
        <div class="messBox">
          <div class="messItem">
            <div class="messLabel">创建时间：</div>
            <div class="messValue">{{ formData.createTime }}</div>
          </div>
          <div class="messItem">
            <div class="messLabel">创建人员：</div>
            <div class="messValue">{{ formData.createBy }}</div>
          </div>
          <div class="messItem">
            <div class="messLabel">修改时间：</div>
            <div class="messValue">{{ formData.updateTime }}</div>
          </div>
          <div class="messItem">
            <div class="messLabel">修改人员：</div>
            <div class="messValue">{{ formData.updateBy }}</div>
          </div>
        </div>
      </div>
      <div class="btn-tab">
        <span @click="Save">保存</span>
        <span @click="Refresh">刷新</span>
      </div>
      <el-form
        class="basicInfo"
        :model="formData"
        :rules="formRules"
        label-suffix="："
        size="small"
        label-width="100px"
        ref="form"
      >
        <div class="middle">
          <div class="middle-box">
            <span class="title"> 基础信息 </span>
          </div>
          <div class="content">
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item class="special" label="企业代码" prop="comCode">
                  <el-input
                    v-model.trim="formData.comCode"
                    clearable
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="shortName">
                  <el-input
                    v-model.trim="formData.shortName"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="税号 " prop="taxNumber">
                  <el-input
                    v-model.trim="formData.taxNumber"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="组织机构ID" prop="levelNo">
                  <el-input
                    v-model.trim="formData.levelNo"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="12">
                <el-form-item label="中文名称" prop="comNameCn">
                  <el-input
                    v-model.trim="formData.comNameCn"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="英文名称" prop="comName">
                  <el-input
                    v-model.trim="formData.comName"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item label="企业类型" prop="comType">
                  <el-checkbox-group
                    v-model="BaseFormData.enterpriseTypesChecked"
                    @change="changeEnterpriseType"
                  >
                    <el-checkbox
                      v-for="item in this.BaseFormData.enterpriseTypesArr"
                      :label="item.label"
                      :value="item.label"
                      :key="item.label"
                    />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业性质" prop="comNature">
                  <el-select
                    v-model.trim="formData.comNature"
                    filterable
                    clearable
                    placeholder="请选择"
                    size="small"
                    fit-input-width
                  >
                    <el-option
                      v-for="item in this.BaseFormData.enterpriseNatureAll"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="经营类目">
                  <div style="min-width: 210px">
                    <el-checkbox-group
                      v-model="formData.businessCategory"
                      @change="changeBusinessCategory"
                    >
                      <el-checkbox
                        v-for="item in this.BaseFormData.businessCategory"
                        :label="item"
                        :value="item"
                        :key="item"
                      />
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item label="国家" prop="country">
                  <el-select
                    v-model.trim="formData.country"
                    filterable
                    clearable
                    placeholder="请输入后搜索"
                    @focus="getNation()"
                    @change="changeNation"
                    size="small"
                    fit-input-width
                  >
                    <el-option
                      v-for="item in this.BaseFormData.nationOption"
                      :key="item.id"
                      :label="item.countryCh"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="地区" prop="district">
                  <el-select
                    v-model.trim="formData.district"
                    filterable
                    clearable
                    placeholder="请输入后搜索"
                    size="small"
                    fit-input-width
                    @focus="getArea()"
                    @change="changeArea()"
                  >
                    <el-option
                      v-for="item in this.BaseFormData.nationOption"
                      :key="item.id"
                      :label="item.nameCh"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-input
                    v-model.trim="formData.city"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编">
                  <el-input
                    v-model.trim="formData.zipCode"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="12">
                <el-form-item label="注册地址" prop="regAddress">
                  <el-input
                    v-model.trim="formData.regAddress"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="办公地址" prop="address">
                  <el-input
                    v-model.trim="formData.entFullname"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item label="电话" prop="telePhone">
                  <el-input
                    v-model.trim="formData.telePhone"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真" prop="fax">
                  <el-input
                    v-model.trim="formData.fax"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮箱">
                  <el-input
                    v-model.trim="formData.email"
                    filterable
                    clearable
                    placeholder="请输入后搜索"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="网址">
                  <el-input
                    v-model.trim="formData.website"
                    clearable
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="tab">
          <el-tabs
            v-model="checkedTab"
            @tab-change="changeTab"
            :before-leave="beforeLeave"
          >
            <el-tab-pane
              label="客户属性"
              v-if="BaseFormData.enterpriseTypesChecked.includes('客户')"
              name="客户属性"
            >
              
            </el-tab-pane>
            <el-tab-pane
              label="供应商属性"
              v-if="BaseFormData.enterpriseTypesChecked.includes('供应商')"
              name="供应商属性"
            >
              
            </el-tab-pane>
            <el-tab-pane
              label="海外代理属性"
              v-if="BaseFormData.enterpriseTypesChecked.includes('海外代理')"
              name="海外代理属性"
            >
              
            </el-tab-pane>
            <el-tab-pane label="信誉额度" name="信誉额度">
              
            </el-tab-pane>
            <el-tab-pane label="开户银行" name="开户银行">
              
            </el-tab-pane>
            <el-tab-pane label="协议文档" name="协议文档">
              
            </el-tab-pane>
            <el-tab-pane label="评审信息" name="评审信息">
              
            </el-tab-pane>
            <el-tab-pane label="联系人信息" name="联系人信息">
              
            </el-tab-pane>
            <el-tab-pane label="其它地址信息" name="其它地址信息">
              
            </el-tab-pane>
            <el-tab-pane label="特殊要求" name="特殊要求">
              
            </el-tab-pane>
          </el-tabs>
          <div class="tabContent">
            <enterpriseDetailCustomAttributes
              v-if="checkedTab == '客户属性'"
              ref="enterpriseDetailCustomAttributes"
              @customAttributesData="acceptcustomAttributesData"
              @acceptNew="acceptNew"
            ></enterpriseDetailCustomAttributes>
            <enterpriseDetailBusinessAttributes
                v-if="checkedTab == '供应商属性'"
                ref="enterpriseDetailBusinessAttributes"
                @supplierAttributeData="acceptsupplierAttributeData"
                @acceptNew="acceptNew"
              ></enterpriseDetailBusinessAttributes>
              <enterpriseDetailOverseasBusiness
              v-if="checkedTab == '海外代理属性'"
                ref="enterpriseDetailOverseasBusiness"
                @overseaAgentData="acceptoverseaAgentData"
                @acceptNew="acceptNew"
              ></enterpriseDetailOverseasBusiness>
              <enterpriseDetailCreditLimit
              v-if="checkedTab == '信誉额度'"
                ref="enterpriseDetailCreditLimit"
                @creditLimitData="acceptcreditLimitData"
                @acceptData="acceptNew"
              ></enterpriseDetailCreditLimit>
              <enterpriseDetailCustomer
              v-if="checkedTab == '开户银行'"
                ref="enterpriseDetailCustomer"
                @acceptData="acceptNew"
                @openingBankData="acceptopeningBankData"
              ></enterpriseDetailCustomer>
              <enterpriseDetailProtocolDocument
                v-if="checkedTab == '协议文档'"
                ref="enterpriseDetailProtocolDocument"
                @protocolDocumentData="acceptprotocolDocumentData"
                @acceptData="acceptNew"
              ></enterpriseDetailProtocolDocument>
              <enterpriseDetailEvaluationInformation
              v-if="checkedTab == '评审信息'"
                ref="enterpriseDetailEvaluationInformation"
                @evolutionInfoData="acceptevolutionInfoData"
                @acceptData="acceptNew"
              ></enterpriseDetailEvaluationInformation>
              <enterpriseDetailMe
              v-if="checkedTab == '联系人信息'"
                ref="enterpriseDetailMe"
                @contactInfoData="acceptcontactInfoData"
                @acceptData="acceptNew"
              ></enterpriseDetailMe>
              <enterpriseDetailOtherAddressInformation
              v-if="checkedTab == '其它地址信息'"
                ref="enterpriseDetailOtherAddressInformation"
                @otherAddressInfo="acceptotherAddressInfo"
                @acceptData="acceptNew"
              ></enterpriseDetailOtherAddressInformation>
              <enterpriseDetailSpecialNeeds
              v-if="checkedTab == '特殊要求'"
                ref="enterpriseDetailSpecialNeeds"
                @specialNeedsInfo="acceptspecialNeedsInfo"
                @acceptData="acceptNew"
              ></enterpriseDetailSpecialNeeds>
          </div>
        </div>
      </el-form>
      <el-dialog
        title="客商信息"
        v-model="bankDialogData.enterpriseShow"
        width="548px"
      >
        <el-form
          :model="formData"
          :rules="formRules"
          label-suffix=":"
          label-width="70px"
          ref="form"
        >
          <el-row>
            <el-col>
              <el-form-item label="企业编号" prop="enterpriseNo">
                <el-input
                  v-model="formData.enterpriseNo"
                  fit-input-width
                  placeholder="自动生成"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input
                  v-model="formData.enterpriseName"
                  fit-input-width
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="企业简称" prop="enterpriseSimpleName">
                <el-input
                  v-model="formData.enterpriseSimpleName"
                  style="max-width: 600px"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="企业类别" prop="enterpriseType">
                <el-checkbox
                  style="width: 100%; height: 30px; margin-top: -3px"
                  v-model="checked1"
                  label="全选"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="报关行"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="公司内部"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="车队"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="船公司"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="仓库"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="订舱单位"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="国外代理"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="航空公司"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="客户"
                  size="large"
                />
                <el-checkbox
                  class="enterprise_Type"
                  v-model="checked1"
                  label="同行"
                  size="large"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" type="default" size="small"
              >取消</el-button
            >
            <el-button
              type="primary"
              size="small"
              style="background: #5d9df5"
              @click="next"
            >
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>
      <enterpriseDetailBank v-model:show="bankDialogData.show">
      </enterpriseDetailBank>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
// import selectDown from "./selectDown.vue";
// 客户属性
import enterpriseDetailCustomAttributes from "./enterpriseDetailCustomAttributes.vue";
// 供应商属性
import enterpriseDetailBusinessAttributes from "./enterpriseDetailBusinessAttributes.vue";
// 海外代理属性
import enterpriseDetailOverseasBusiness from "./enterpriseDetailOverseasBusiness.vue";
// 信誉额度
import enterpriseDetailCreditLimit from "./enterpriseDetailCreditLimit.vue";
// 开户银行
import enterpriseDetailCustomer from "./enterpriseDetailCustomerCopy.vue";
// 协议文档
import enterpriseDetailProtocolDocument from "./enterpriseDetailProtocolDocument.vue";
// 评审信息
import enterpriseDetailEvaluationInformation from "./enterpriseDetailEvaluationInformation.vue";
// 联系人信息
import enterpriseDetailMe from "./enterpriseDetailMe.vue";
// 其他地址信息
import enterpriseDetailOtherAddressInformation from "./enterpriseDetailOtherAddressInformation.vue";
// 特殊要求
import enterpriseDetailSpecialNeeds from "./enterpriseDetailSpecialNeeds.vue";
import { ElMessageBox } from "element-plus";
export default defineComponent({
  components: {
    enterpriseDetailCustomAttributes,
    enterpriseDetailBusinessAttributes,
    enterpriseDetailOverseasBusiness,
    enterpriseDetailCreditLimit,
    enterpriseDetailCustomer,
    enterpriseDetailProtocolDocument,
    enterpriseDetailEvaluationInformation,
    enterpriseDetailMe,
    enterpriseDetailOtherAddressInformation,
    enterpriseDetailSpecialNeeds,
  },
  data() {
    return {
      isNew: false,
      formData: {
        //企业信息
        auditState: 0,
        businessCategory: "",
        cargoSource: "",
        city: "",
        comCategory: "",
        comCode: "",
        comName: "",
        comNameCn: "",
        comNature: "",
        comStateId: "",
        comType: "",
        country: "",
        createBy: "",
        createTime: "",
        district: "",
        email: "",
        fax: "",
        id: "",
        isCustomer: true,
        isDeleted: false,
        isOverseaAgent: false,
        isSupplier: false,
        levelNo: "",
        regAddress: "",
        remark: "",
        shortName: "",
        taxNumber: "",
        telePhone: "",
        updateBy: "",
        updateTime: null,
        website: "",
        zipCode: "",
      },
      BaseFormData: {
        //基础信息表单数据
        enterpriseTypesArr: [], //基础信息企业类型
        enterpriseTypesChecked: [], //选中的企业类型数据
        nationOption: [], //国家信息
        areaOption: [], //地区信息
        NationId: "",
        shortName: "",
        enterpriseType: "",
        businessCategoryStr: "",
        businessCategory: [],
        checkedBusinessCategory: [],
        enterpriseNatureAll: [], //企业性质
      },
      formRules: {
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        enterpriseSimpleName: [
          { required: true, message: "请输入企业简称", trigger: "blur" },
        ],
        enterpriseType: [
          { required: true, message: "请选择企业类型", trigger: "blur" },
        ],
      },
      initOption: {
        ywyOption: [],
        khhxOption: [],
      },
      checkAll: false,
      isIndeterminate: true,
      typeOptions: [],
      loading: false,
      saveBtnLoading: false,
      bankDialogData: {
        show: false,
        enterpriseShow: false,
      },
      isNextTabs: true,
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      checkedTab: "",

      // 接受标签页更改后的数据
      customerAttributeData: {},
      supplierAttributeData: {},
      isOverseaAgentData: {},
      creditLimitData: {},
      openingBankData: [],
      protocolDocumentData: [], //协议文档
      evolutionInfoData: [], //评审信息
      contactInfoData: [],
      otherAddressInfo: [],
      specialNeedsInfo: [],
    };
  },
  emits: [
    "customAttributesData",
    "supplierAttributeData",
    "overseaAgentData",
    "creditLimitData",
    "openingBankData",
    "protocolDocumentData",
    "evolutionInfoData",
    "contactInfoData",
    "otherAddressInfo",
    "specialNeedsInfo",
  ],
  methods: {
    async Save() {
      //保存按钮
      if (this.BaseFormData.enterpriseTypesChecked[0] == "") {
        this.BaseFormData.enterpriseTypesChecked.shift();
      }
      this.BaseFormData.shortName = this.formData.shortName;
      this.formData.comType =
        this.BaseFormData.enterpriseTypesChecked.join(",");

      console.log("businessCategoryStr", this.BaseFormData.businessCategoryStr);
      this.BaseFormData.businessCategoryStr =
        this.formData.businessCategory.join(",");
      this.BaseFormData.enterpriseType =
        this.BaseFormData.enterpriseTypesChecked.join(",");
      this.formData.country = this.BaseFormData.NationId;
      if (this.formData.businessCategory.length > 1) {
        this.formData.businessCategory =
          this.formData.businessCategory.join(",");
      } else if (this.formData.businessCategory.length == 1) {
        this.formData.businessCategory = this.formData.businessCategory[0];
      } else {
        this.formData.businessCategory = "";
      }

      let res = await this.$http.post(
        "/api/crcontactcompany/update",
        this.formData
      );

      if (res.status) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
      // 保存客户属性数据
      let crCustom = await this.$http.post(
        "/api/crcustomer/create",
        this.customerAttributeData
      );
      // 保存供应商属性数据
      let crSupplier = await this.$http.post(
        "/api/crsupplier/create",
        this.supplierAttributeData
      );
      // 保存海外代理属性数据
      let crOversea = await this.$http.post(
        "/api/croverseaagent/create",
        this.isOverseaAgentData
      );
      // 保存信誉额度数据
      let crCredit = await this.$http.post(
        "/api/crcredit/create",
        this.creditLimitData
      );
      // 保存开户银行数据
      // 先查询开户银行之前的数据
      let bankRes = await this.$http.get("/api/cropeningbank/queryby", {
        Id: this.$route.query.id,
      });
      let oldBank = bankRes.data;
      // 开户银行删除的数据
      const deleteArr = oldBank.filter(
        (item) => !this.openingBankData.some((item2) => item.id === item2.id)
      );
      let ids = deleteArr.map((item) => {
        return item.id;
      });
      // 开户银行新增或修改的数据
      const NewOrUpdateArr = this.openingBankData.filter(
        (item) => !deleteArr.some((item2) => item.id === item2.id)
      );
      if (deleteArr.length) {
        //调用删除接口
        let bankDelete = await this.$http.post("/api/cropeningbank/delete", {
          idArray: ids,
        });
      }
      if (NewOrUpdateArr.length) {
        let newBankArr = NewOrUpdateArr.map((item) => {
          if (Number.isInteger(item.id)) {
            item.id = 0;
          }
          return item;
        });
        let bankAddOrUpdate = await this.$http.post(
          "/api/cropeningbank/batchcreate",
          {
            createUpdateCrOpeningBankDto: newBankArr,
          }
        );
      }

      // 保存协议文档
      let protocolRes = await this.$http.get("/api/crprotocol/queryby", {
        Id: this.$route.query.id,
      });
      let oldprotocol = protocolRes.data;
      // 协议文档删除的数据
      const deleteprotocolArr = oldprotocol.filter(
        (item) =>
          !this.protocolDocumentData.some((item2) => item.id === item2.id)
      );
      let ids_protocol = deleteprotocolArr.map((item) => {
        return item.id;
      });
      // 协议文档新增或修改的数据
      const protocolNewOrUpdateArr = this.protocolDocumentData.filter(
        (item) => !deleteprotocolArr.some((item2) => item.id === item2.id)
      );
      if (deleteprotocolArr.length) {
        //调用删除接口
        let protocolDelete = await this.$http.post("/api/crprotocol/delete", {
          idArray: ids_protocol,
        });
      }
      if (protocolNewOrUpdateArr.length) {
        let newprotocolArr = protocolNewOrUpdateArr.map((item) => {
          if (Number.isInteger(item.id)) {
            item.id = 0;
          }
          return item;
        });
        let newprotocolDocumentArr = await this.$http.post(
          "/api/crprotocol/batchcreate",
          {
            createUpdateCrProtocolDto: newprotocolArr,
          }
        );
      }

      // 保存评审信息
      let evolutionInfolRes = await this.$http.get("/api/crreview/queryby", {
        Id: this.$route.query.id,
      });
      let oldevolution = evolutionInfolRes.data;
      // 评审信息删除的数据
      const deleteevolutionArr = oldevolution.filter(
        (item) => !this.evolutionInfoData.some((item2) => item.id === item2.id)
      );
      let ids_evolution = deleteevolutionArr.map((item) => {
        return item.id;
      });
      // 评审信息新增或修改的数据
      const evolutionNewOrUpdateArr = this.evolutionInfoData.filter(
        (item) => !deleteevolutionArr.some((item2) => item.id === item2.id)
      );
      if (deleteevolutionArr.length) {
        //调用删除接口
        let protocolDelete = await this.$http.post("/api/crreview/delete", {
          idArray: ids_evolution,
        });
      }
      if (evolutionNewOrUpdateArr.length) {
        let newevolutionArr = evolutionNewOrUpdateArr.map((item) => {
          if (Number.isInteger(item.id)) {
            item.id = 0;
          }
          return item;
        });
        let newevolutionDocumentArr = await this.$http.post(
          "/api/crreview/batchcreate",
          {
            createUpdateCrReviewDto: newevolutionArr,
          }
        );
      }

      // 保存联系人信息
      let contactInfoRes = await this.$http.get("/api/crcontactor/queryby", {
        Id: this.$route.query.id,
      });
      let oldcontact = contactInfoRes.data;
      // 联系人信息删除的数据
      const deletecontactInfoArr = oldcontact.filter(
        (item) => !this.contactInfoData.some((item2) => item.id === item2.id)
      );
      let ids_contact = deletecontactInfoArr.map((item) => {
        return item.id;
      });
      // 联系人信息新增或修改的数据
      const contactNewOrUpdateArr = this.contactInfoData.filter(
        (item) => !deletecontactInfoArr.some((item2) => item.id === item2.id)
      );
      if (deletecontactInfoArr.length) {
        //调用删除接口
        let contactDelete = await this.$http.post("/api/crcontactor/delete", {
          idArray: ids_contact,
        });
      }
      if (contactNewOrUpdateArr.length) {
        let newcontactArr = contactNewOrUpdateArr.map((item) => {
          if (Number.isInteger(item.id)) {
            item.id = 0;
          }
          return item;
        });
        let newcontactInfoArr = await this.$http.post(
          "/api/crcontactor/batchcreate",
          {
            createUpdateCrContactorDto: newcontactArr,
          }
        );
      }

      // 保存其他地址信息
      let otherAddressInfoRes = await this.$http.get("/api/craddress/queryby", {
        Id: this.$route.query.id,
      });
      let oldother = otherAddressInfoRes.data;
      // 评审信息删除的数据
      const deleteotherInfoArr = oldother.filter(
        (item) => !this.otherAddressInfo.some((item2) => item.id === item2.id)
      );
      let ids_other = deleteotherInfoArr.map((item) => {
        return item.id;
      });
      // 评审信息新增或修改的数据
      const otherNewOrUpdateArr = this.otherAddressInfo.filter(
        (item) => !deleteotherInfoArr.some((item2) => item.id === item2.id)
      );
      if (deleteotherInfoArr.length) {
        //调用删除接口
        let otherDelete = await this.$http.post("/api/craddress/delete", {
          idArray: ids_other,
        });
      }
      if (otherNewOrUpdateArr.length) {
        let newotherArr = otherNewOrUpdateArr.map((item) => {
          if (Number.isInteger(item.id)) {
            item.id = 0;
          }
          return item;
        });
        let newotherArrInfoArr = await this.$http.post(
          "/api/craddress/batchcreate",
          {
            createUpdateCrAddressDto: newotherArr,
          }
        );
      }

      // 保存特殊要求
      let specialNeedsInfoRes = await this.$http.get(
        "/api/crspecialrequest/queryby",
        {
          Id: this.$route.query.id,
        }
      );
      let oldspecial = specialNeedsInfoRes.data;
      console.log("oldspecial", oldspecial);
      // 评审信息删除的数据
      const deletespecialArr = oldspecial.filter(
        (item) => !this.specialNeedsInfo.some((item2) => item.id === item2.id)
      );
      console.log("deletespecialArr", deletespecialArr);
      let ids_special = deletespecialArr.map((item) => {
        return item.id;
      });
      // 评审信息新增或修改的数据
      const specialNewOrUpdateArr = this.specialNeedsInfo.filter(
        (item) => !deletespecialArr.some((item2) => item.id === item2.id)
      );
      console.log("specialNewOrUpdateArr", specialNewOrUpdateArr);
      if (deletespecialArr.length) {
        //调用删除接口
        let specialDelete = await this.$http.post(
          "/api/crspecialrequest/delete",
          {
            idArray: ids_special,
          }
        );
      }
      if (specialNewOrUpdateArr.length) {
        let newspecialArr = specialNewOrUpdateArr.map((item) => {
          if (Number.isInteger(item.id)) {
            item.id = 0;
          }
          return item;
        });
        let newspecialInfoArr = await this.$http.post(
          "/api/crspecialrequest/batchcreate",
          {
            createUpdateCrSpecialRequestDto: newspecialArr,
          }
        );
      }

      this.getEnterpriseDetailInfo();
      this.isNew = false;
    },
    Refresh() {
      //刷新
      this.getEnterpriseDetailInfo(); //重新加载基础信息部分

      this.isNew = false;
      this.$message.success("成功");
    },
    changeTab(e) {
      //tab标签页切换
      if (e === "客户属性") {
      } else if (e === "供应商属性") {
        this.$refs.enterpriseDetailBusinessAttributes.isUpdatess = true;
      } else if (e === "海外代理属性") {
        this.$refs.enterpriseDetailOverseasBusiness.isUpdatess = true;
      } else if (e === "信誉额度") {
        this.$refs.enterpriseDetailCreditLimit.isUpdatess = true;
      }
    },
    updateEnterpriseInfo() {
      //修改企业资料弹出框
      this.bankDialogData.enterpriseShow = true;
    },
    cancel() {
      this.bankDialogData.enterpriseShow = false;
      this.$refs.form.clearValidate();
    },
    async next() {
      await this.$refs.form.validate();
      this.bankDialogData.enterpriseShow = false;
    },
    getEnterpriseDetailInfo() {
      if (this.$route.query.id) {
        this.$http
          .get("/api/crcontactcompany/querybyid", {
            Id: this.$route.query.id,
          })
          .then(async (res) => {
            console.log("info", res);
            this.loading = true;
            res.data == null
              ? (this.BaseFormData.shortName = "")
              : (this.BaseFormData.shortName = res.data.shortName);
            let dictAll = await this.$http.get("/api/basedict/query");
            let typeAll = await this.$http.get("/api/basedictdetail/query", {
              DictId: dictAll.content.filter(
                (item) => item.name == "企业类型"
              )[0].id,
              DictName: "",
              KeyWords: "",
            });
            this.BaseFormData.enterpriseTypesArr = typeAll.content;
            let categoryAll = await this.$http.get(
              "/api/basedictdetail/query",
              {
                DictId: dictAll.content.filter(
                  (item) => item.name == "经营类目"
                )[0].id,
                DictName: "",
                KeyWords: "",
              }
            );
            let enterpriseNatureAll = await this.$http.get(
              "/api/basedictdetail/query",
              {
                DictId: dictAll.content.filter(
                  (item) => item.name == "企业性质"
                )[0].id,
                DictName: "",
                KeyWords: "",
              }
            );
            this.BaseFormData.enterpriseNatureAll = enterpriseNatureAll.content;
            this.BaseFormData.businessCategory = categoryAll.content.map(
              (item) => {
                return item.label;
              }
            );

            if (res.data != null) {
              // 转换企业类型
              if (res.data.comType == "" || res.data.comType == null) {
                this.BaseFormData.enterpriseTypesChecked = [];
              } else {
                if (res.data.comType.indexOf(",") <= -1) {
                  if (
                    this.BaseFormData.enterpriseTypesArr.filter(
                      (item) => item.label == res.data.comType
                    ).length
                  ) {
                    let arr = [];
                    arr.push(res.data.comType);
                    this.BaseFormData.enterpriseTypesChecked = arr;
                  } else {
                    this.BaseFormData.enterpriseTypesChecked = [];
                  }
                } else {
                  this.BaseFormData.enterpriseTypesChecked =
                    res.data.comType.split(",");
                }
              }
              this.BaseFormData.enterpriseTypesChecked.sort((a, b) => {
                return a.length - b.length;
              });
              this.checkedTab =
                this.BaseFormData.enterpriseTypesChecked.length > 0
                  ? this.BaseFormData.enterpriseTypesChecked[0] + "属性"
                  : "信誉额度";

              // 转换经营类目
              if (
                res.data.businessCategory != "" &&
                res.data.businessCategory != null
              ) {
                this.BaseFormData.businessCategoryStr =
                  res.data.businessCategory;
              }
              if (
                res.data.businessCategory == "" ||
                res.data.businessCategory == null
              ) {
                res.data.businessCategory = [];
              } else {
                if (res.data.businessCategory.indexOf(",") > -1) {
                  res.data.businessCategory =
                    res.data.businessCategory.split(",");
                } else {
                  if (
                    this.BaseFormData.businessCategory.includes(
                      res.data.businessCategory
                    )
                  ) {
                    let arr = [];
                    arr.push(res.data.businessCategory);
                    res.data.businessCategory = arr;
                  } else {
                    res.data.businessCategory = [];
                  }
                }
              }

              if (res.data.country != "" && res.data.country != null) {
                let Nationres = await this.$http.get("/api/cscountry/query", {
                  KeyWords: "",
                });
                this.BaseFormData.nationOption = Nationres.content;

                res.data.country = this.translateNation(
                  this.BaseFormData.nationOption,
                  res.data.country
                );
              }

              this.BaseFormData.enterpriseType = res.data.comType;
              this.Id = res.data.id;
              this.formData = res.data;
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    changeEnterpriseType(e) {
      e.sort((a, b) => {
        return a.length - b.length;
      });
      this.checkedTab = e.length > 0 ? e[0] + "属性" : "信誉额度";
    },
    changeNation(e) {
      //国家发生改变之后
      this.BaseFormData.NationId = e;
    },
    changeArea(e) {
      console.log(e);
    },
    async getNation() {
      //获取国家信息
      let res = await this.$http.get("/api/cscountry/query", { KeyWords: "" });
      this.BaseFormData.nationOption = res.content;
    },
    translateNation(option, Id) {
      //将id转换为标签
      return option.filter((item) => item.id == Id)[0].countryCh;
    },
    async getArea() {
      let area = await this.$http.get("/api/cscistrict/query", {
        KeyWords: "",
        Id: this.BaseFormData.NationId,
      });
      this.BaseFormData.nationOption = area.content;
    },
    changeBusinessCategory(e) {
      this.formData.businessCategory = e;
    },
    beforeLeave(item) {
      console.log("this.isNew", this.isNew);

      if (this.isNew) {
        let p = new Promise((resolve, reject) => {
          ElMessageBox.confirm(
            "该页面尚未保存，离开该页面将不会作任何修改，确认继续吗？",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then(async () => {
              console.log("this.checkedTab", this.checkedTab);
              if (this.checkedTab === "客户属性") {
                await this.$refs.enterpriseDetailCustomAttributes.resetFormData();
              } else if (this.checkedTab === "供应商属性") {
                await this.$refs.enterpriseDetailBusinessAttributes.resetFormData();
              } else if (this.checkedTab === "海外代理属性") {
                await this.$refs.enterpriseDetailOverseasBusiness.resetFormData();
              } else if (this.checkedTab === "信誉额度") {
                await this.$refs.enterpriseDetailCreditLimit.resetFormData();
              } else if (this.checkedTab === "开户银行") {
                await this.$refs.enterpriseDetailCustomer.resetTableData();
              } else if (this.checkedTab === "协议文档") {
                await this.$refs.enterpriseDetailProtocolDocument.resetTableData();
              } else if (this.checkedTab === "评审信息") {
                await this.$refs.enterpriseDetailEvaluationInformation.resetTableData();
              } else if (this.checkedTab === "联系人信息") {
                await this.$refs.enterpriseDetailMe.resetTableData();
              } else if (this.checkedTab === "其它地址信息") {
                await this.$refs.enterpriseDetailOtherAddressInformation.resetTableData();
              } else if (this.checkedTab === "特殊要求") {
                await this.$refs.enterpriseDetailSpecialNeeds.resetTableData();
              }
              this.isNew = false;
              resolve();
            })
            .catch((err) => {
              reject(err);
            });
        });
        return p;
      } else {
        return true;
      }
    },
    // 接收新的事件
    acceptNew(data) {
      this.isNew = true;
      // console.log("我是父组件，接收的数据是：", data);
    },
    acceptcustomAttributesData(data) {
      this.customerAttributeData = data;
    },
    acceptsupplierAttributeData(data) {
      this.supplierAttributeData = data;
    },
    acceptoverseaAgentData(data) {
      this.isOverseaAgentData = data;
    },
    acceptcreditLimitData(data) {
      this.creditLimitData = data;
    },
    acceptopeningBankData(data) {
      this.openingBankData = data;
    },
    acceptprotocolDocumentData(data) {
      this.protocolDocumentData = data;
    },
    acceptevolutionInfoData(data) {
      this.evolutionInfoData = data;
    },
    acceptcontactInfoData(data) {
      this.contactInfoData = data;
    },
    acceptotherAddressInfo(data) {
      this.otherAddressInfo = data;
    },
    acceptspecialNeedsInfo(data) {
      this.specialNeedsInfo = data;
    },
    resetIsNew() {
      console.log('页面加载了');
      this.isNew = false;
    },
    // solveFirstTab() {
    //   if (this.checkedTab === "客户属性") {
    //   } else if (this.checkedTab === "供应商属性") {
    //   } else if (this.checkedTab === "海外代理属性") {
    //     this.$refs.enterpriseDetailOverseasBusiness.isUpdatess = true;
    //   } else if (this.checkedTab === "信誉额度") {
    //     this.$refs.enterpriseDetailCreditLimit.isUpdatess = true;
    //   }
    // },
    // initData() {
    //   const typeOption = this.getTypeOption();
    //   const data = this.$http
    //     .get("/api/buenterprise/queryById", {
    //       Id: this.$route.query.entId,
    //     })
    //     .then((res) => {
    //       if (res.status) {
    //         this.formData = res.data;
    //       }
    //     });
    //   this.loading = true;
    //   Promise.allSettled([typeOption, data])
    //     .then((res) => {
    //       this.handleCheckedTypeChange(this.formData.cltTypeList);
    //       this.getAllOption();
    //     })
    //     .finally(() => (this.loading = false));
    // },

    // handleCheckedTypeChange(value) {
    //   const checkedCount = value.length;
    //   this.checkAll = checkedCount === this.typeOptions.length;
    //   this.isIndeterminate =
    //     checkedCount > 0 && checkedCount < this.typeOptions.length;
    // },
    // save() {
    //   this.$refs.form.validate((v) => {
    //     if (v) {
    //       if (this.formData.cltTypeList.length != 0) {
    //         this.saveBtnLoading = true;
    //         this.$http
    //           .post("/api/buenterprise/create", this.formData)
    //           .then((res) => {
    //             if (res.status) {
    //               this.$message.success(res.message);
    //               this.$router.closeAndRefreshTab(
    //                 "/enterprise/enterpriseManager"
    //               );
    //             } else {
    //               this.$message.error(res.message);
    //             }
    //           })
    //           .finally(() => (this.saveBtnLoading = false));
    //       } else {
    //         this.$message.warning("类别至少选择一个");
    //       }
    //     } else {
    //       console.log(v);
    //     }
    //   });
    // },
  },
  created() {
    // window.addEventListener('onload', this.resetIsNew)
    window.onload = () => {
      this.resetIsNew()
    }
  },
  watch: {},
  mounted() {
    this.getEnterpriseDetailInfo();
  },
});
</script>

<style lang="scss" scoped>
html,
body {
  background-color: #f8f8f8;
}
.in-container {
  border: none;
  height: fit-content;
  .basicInfo {
    border: none;
  }
}
.content {
  padding: 0;
  .enterpriseNo {
    font-size: 15px;
    font-weight: 600;
  }
  .enterpriseInfo {
    background: #ffffff;
    box-sizing: border-box;
    padding: 8px 12px;
    margin-bottom: 12px;
    .topBox {
      display: flex;
      align-items: center;
      .codebox {
        color: #000000d8;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0px;
        text-align: left;
        margin-right: 8px;
        font-weight: 600;
      }
      .status {
        border: 1px solid transparent;
        box-sizing: border-box;
        padding: 0 4px;
        font-size: 12px;
        line-height: 22px;
        letter-spacing: 0px;
        border-radius: 2px;
        margin-left: 8px;
      }
      .statusType1 {
        border-color: #d9d9d9;
        background: #d9d9d919;
        color: #00000099;
      }
      .statusType2 {
        border-color: #fa8c16;
        background: #fff7e6;
        color: #fa8c16;
      }
      .statusType3 {
        border-color: #f5222d;
        background: #fff1f0;
        color: #f5222d;
      }
      .statusType4 {
        border-color: #2cbe60;
        background: #eefbf3;
        color: #2cbe60;
      }
    }
  }
  .enterpriseInfo {
    padding: 8px 12px 0px;
    .messBox {
      margin-top: 12px;
      display: flex;
      .messItem {
        width: 240px;
        display: flex;
        .updateTop {
          color: #a0c5f8;
          font-size: 12px;
          cursor: pointer;
          display: inline-block;
          width: 50px;
          text-align: left;
        }
        .messLabel {
          color: #00000099;
          font-size: 12px;
          line-height: 20px;
          letter-spacing: 0px;
          margin-right: 4px;
          width: 60px;
        }
        .messValue {
          flex: 1;
          color: #00000099;
          font-size: 12px;
          line-height: 20px;
          letter-spacing: 0px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .state {
      margin-left: 12px;
      padding: 2px 4px;
      display: inline-block;
      border: 1px solid #e2e2e2;
      border-radius: 3px;
    }
    .update_btn {
      color: #8ebaf7;
      margin-left: 12px;
      cursor: pointer;
    }
    ::v-deep .is-guttered {
      height: 20px;
    }
  }
  .btn-tab {
    height: 58px;
    padding: 8px 16px;
    border-top: 12px solid #f8f8f8;
    border-bottom: 12px solid #f8f8f8;
    display: flex;
    align-items: center;
    span {
      font-size: 12px;
      margin-right: 8px;
      color: #5d9df5;
      cursor: pointer;
    }
  }
  .middle {
    padding: 8px;
    .middle-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        border-left: 2px solid #5d9df5;
        padding-left: 4px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
      }
    }
    ::v-deep .el-form-item--small .el-form-item__label:first-of-type {
      text-align: right;
    }
  }
  .tab {
    padding: 0px 8px 8px 8px;
    border-top: 8px solid #f8f8f8;
  }
  :deep(.el-form) {
    height: calc(100% - 49px);
    .el-form-item__label {
      font-size: 12px;
    }
  }
  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-checkbox) {
    margin-right: 8px;
    .el-checkbox__label {
      font-size: 12px;
    }
  }
  :deep(.el-tabs) {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 55px);
    }
    .el-tab-pane {
      height: 100%;
    }
  }
  .enterpriseTypegroup {
  }
  ::v-deep .el-tabs__item {
    font-weight: 600;
  }
}
::v-deep .el-row-first {
  margin: 5px 0 0;
}

::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  text-align: center;
  border-top: 1px solid #dee1e6;
}
.enterprise_Type {
  width: fit-content;
  height: 30px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
.middle {
  ::v-deep .el-form-item--small {
    margin-bottom: 8px;
  }
}
</style>

<!-- 

-->
